<template>
    <div class="app-container">
        <div class="tip">
            <label class="title">关于词性标注介绍</label>
            <br><br>
            该功能把用户录入的文本进行分词处理，根据词语标注成 名词、动词、形容词等词性。
        </div>

        <div>
            <span>待处理文本：</span>
            <el-input
                style="font-size: 20px;"
                type="textarea"
                :rows="8"
                placeholder="请输入待处理文本"
                v-model="textarea">
            </el-input>
            <el-button style="margin: 20px 0;" type="success" @click="handleExtract">提取文本</el-button>
        </div>
        <div >
            <el-card shadow="never" style="min-height: 300px">
                <el-row :gutter="24">
                    <el-col :span="16">
                        <h4>结果集：</h4>
                        <div>
                            <el-button style="margin: 5px;color: #000000" :style="'background-color:'+item.color"  v-for="item in resuleMap.posTaggingList">{{item.word}}({{item.nature}})</el-button>
                        </div>
                    </el-col>
                    <el-col :span="8" >
                        <h4>词性类别图示：</h4>
                        <div>
                            <el-button style="margin: 5px;color: #000000" :style="'background-color:'+item.color" v-for="item in resuleMap.posCategoryList">{{item.name}}({{item.code}})</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-card>
        </div>
    </div>
</template>

<script>

    import {
        posTaggingByWords
    } from "@/api/system/nlp";
    import { checkPermi, checkRole } from "@/utils/permission";

    export default {
        name: "posTaggingByWords",
        data() {
            return {
                // 遮罩层
                loading: true,
                // 导出遮罩层
                exportLoading: false,
                resuleMap: {
                    posCategoryList: [],
                    posTaggingList: []
                },
                textarea: "降水天气对高速公路的影响与降水的性质、强度、降水量有密切关系，与降雨相比,降雪和雨夹雪天气对高速公路交通的影响更加显著。" +
                    "降水天气对沪宁高速公路的影响主要是降雨尤其是降雪容易导致路面潮湿和打滑，路面摩擦系数降低；" +
                    "雨天空气湿度大,能见度有所下降，影响到行车的视线,容易引发交通事故。",
            };
        },
        created() {
        },
        methods: {
            checkPermi,
            checkRole,
            /** 查询停用词列表 */
            handleExtract() {
                this.loading = true;
                posTaggingByWords({
                    text: this.textarea
                }).then(response => {
                    this.$set(this.resuleMap, "posCategoryList", response.data.posCategoryList)
                    this.$set(this.resuleMap, "posTaggingList", response.data.posTaggingList)
                });
            },

        }
    };
</script>
<style>
    .app-container .tip {
        padding: 8px 16px;
        background-color: #ecf8ff;
        border-radius: 4px;
        border-left: 5px solid #50bfff;
        margin: 20px 0;
    }
    .app-container .tip .title{
        font-weight: bolder;
        font-size: 20px;
        margin-bottom: 50px;
    }
</style>
